<template>
  <div class="reward-main" v-if="loaded">
    <draggable class="list-group" v-model="rewardList"  @end="onEnd" >
      <!--                :move="checkMove" @start="dragging = true" @end="onEnd" >-->
      <transition-group type="transition" :name="'flip-list'" class="group-container"  >
        <div v-for="(item,index) in rewardList" :key="(item.a[1]*10+index+10)" class="projects-box">
          <div class="project-item-box">
            <div class="good-info" @click="changeGoodInfo(item,index)">
              <span>奖励:</span>
              <!--          <span>{{item.a[0]}}-</span>-->
              <span style="color: black">{{item.a[1]==='' || item.a[1]===undefined ? '空奖励': getBonuInfo(item)  }}</span>
              <span style="color: black">x{{item.a[2]}}</span>
              <span></span>
            </div>
            <div class="good-action">
              <i class="el-icon-close buton-icon"    @click="removeAt(index,item)"></i>
              <i class="el-icon-document-copy buton-icon"   @click="cloneReward(index,item)"></i>
            </div>
          </div>
        </div>
      </transition-group>
    </draggable>
    <div class="add-award">
      <el-button class="add-award-text"  type="text" @click="AddItem">
        <span style="position: relative; " class="buton-icon-add">
          +新增奖励
        </span>
      </el-button>
    </div>

    <!--  弹窗   -->
    <!--    <div v-if="dialogFormVisible">-->
    <el-dialog title="奖励配置" width="800px" :visible="dialogFormVisible" :modal="true" @close="dialogFormVisible = false">
      <el-form :model="checkReward" :rules="rules" ref="checkReward" class="layout-item">
        <el-row type="flex" class="row-bg" justify="start" >
          <el-col :span="12">
            <el-form-item label="奖励类型" :label-width="formLabelWidth" prop="type">
              <el-select  v-model="checkReward.a[0]" placeholder="请选择奖励类型" @change="SelectedType(checkReward.a[0],0)">
                <el-option  v-for="(item,index) in reward_type_list" :key="item.type" :label="item.type + '-' + item.name" :value="item.type"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="row-bg" justify="start"  >
          <el-col :span="12">
            <el-form-item label="物品" :label-width="formLabelWidth" prop="id">
              <el-select v-model="checkReward.a[1]" filterable placeholder="请选择" @change="handleSelect">
                <el-option
                    @click="chooseOption"
                    v-for="item in bounsSelects"
                    :key="item.id"
                    :label="item.id+'-'+item.value+'-'+item.price"
                    :value="item.id">
                </el-option>
              </el-select>
              <!--                  <el-input  style="width: 200px"  v-model.number="checkReward.name" :disabled="true"></el-input>-->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物品ID" :label-width="formLabelWidth" prop="id">
              <el-input style="width: 200px" v-model.number="checkReward.a[1]"  :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="row-bg" justify="start">
          <el-col :span="12">
            <el-form-item label="物品数量" :label-width="formLabelWidth" prop="num">
              <el-input style="width: 200px" type="number" v-model.number="checkReward.a[2]" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateReward()">确 定</el-button>
      </div>
    </el-dialog>
    <!--    </div>-->
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  name: "reward.vue",
  props: {
    'gindex': 0
  },
  components: {
    draggable
  },
  data() {
    return {
      loaded: true,
      rewardList: [],//奖励实例列表
      checkReward: {
        a: [0, 0, 1],
      },
      checkIndex: -1,
      reward_type_list: [],
      dialogFormVisible: false,
      formLabelWidth: '100px',
      bounsSelects: [],
      bonusList: [],
      rules: {}
    }
  },
  mounted(){
    //初始化数据 TODO: 引入需要修改
    this.rewardList = this.$store.state.itemData.xxxxxxx[this.gindex].reward
    // this.rewardList = this.$store.state.itemData.xxxxxx

    //初始化选项
    this.reward_type_list = this.$store.state.rewardList
    this.bonusList = this.$store.state.bonusList
    this.bounsSelects = this.$store.state.bonusList[0]
  },
  methods:{
    //动态加载奖励名称
    getBonuInfo(item){
      let type = item.a[0]
      let id = item.a[1]
      const bonus = this.bonusList[type]
      for (let i = 0,len=bonus.length; i < len; i++) {
        if(bonus[i].id == id){
          return '['+bonus[i].id +']   '+bonus[i].value+' $'+bonus[i].price
        }
      }
    },
    //删除
    removeAt(index,item){
      let info = this.getBonuInfo(item)
      this.$confirm(`删除奖励第${index}项，${info}, 继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //初始化数据 TODO: 引入需要修改 ！！!无需修改
        // this.rewardList = this.$store.state.itemData.xxxxxx[this.gindex].reward.splice(index,1)
        // this.rewardList = this.$store.state.itemData.xxxxxx
        this.rewardList.splice(index,1)

        // this.$store.state.itemData.reward.goal_reward[this.gindex].reward.splice(index,1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //克隆
    cloneReward(index,item){
      let obj = JSON.parse(JSON.stringify(item))
      // 克隆数据 TODO: 引入需要修改
      // this.$store.state.itemData.xxxxxxx[this.gindex].reward.push(obj)
      // this.$store.state.itemData.xxxxxx.push(obj)
      this.$store.state.itemData.reward.goal_reward[this.gindex].reward.push(obj)
      this.$message.success('克隆成功')
    },
    //点击修改
    changeGoodInfo(item,index){
      this.checkReward = JSON.parse(JSON.stringify(item))
      this.bounsSelects = this.$store.state.bonusList[item.a[0]]
      this.checkIndex = index
      this.dialogFormVisible = true
    },
    //根据type获取奖励奖励列表
    SelectedType(type,isAdd){
      if(isAdd){
        return  this.checkReward.a[1] = ''
      }
      this.checkReward.a[1] = ''
      this.bounsSelects = this.$store.state.bonusList[type]
    },
    //选择物品
    handleSelect(value){
      // console.log('选择了物品：',value)
    },
    //确定修改
    updateReward(){
      this.valided(true)
    },
    valided(status,items){
      if(status){
        if(this.Verify() == false){
          return
        }
        this.dialogFormVisible = false
        // 添加数据 TODO: 引入需要修改
        // this.$store.state.itemData.xxxxxxx[this.gindex].reward[this.checkIndex]  = this.checkReward
        // this.$store.state.itemData.xxxxxx[this.checkIndex]
        this.$store.state.itemData.reward.goal_reward[this.gindex].reward[this.checkIndex] = this.checkReward
        this.$message.success('修改成功')
      }else {
        this.$message.error('请检查后再提交')
      }
    },
    //拖拽结束提交修改
    onEnd() {
      //引入需要修改 TODO: 拖拽修改
      // this.$store.state.itemData.xxxxxxx[this.gindex].reward = this.rewardList
      // this.$store.state.itemData.xxxxxx[this.checkIndex]
      this.$store.state.discountData[this.gindex].rewardList = this.rewardList
    },
    //修改前校验
    Verify(){
      try {
        if(this.checkReward.a[0] === '') {
          this.$message.error('请选择奖励类型')
          return false
        }
        if(this.checkReward.a[1] === '') {
          this.$message.error('请选择物品')
          return false
        }
        if(this.checkReward.a[2] <=0) {
          this.$message.error('请输入正确数量')
          return false
        }
      }catch (e) {
        return false
      }
      return true
    },
    //新增
    AddItem(){
      let reward = {
        "a":[0,0,1]
      }
      this.changeGoodInfo(reward,this.rewardList.length)
    },
    //选中option
    chooseOption(item){
      // console.log('item',item)
    },
    //重载视图
    reloadVivew(){
      this.loaded = false;
      this.$nextTick(()=>{
        this.loaded = true
      })
    }
  }
}
</script>

<style scoped>
.reward-main {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.projects-box{
  min-width: 500px;
}
.project-item-box{
  max-width: 700px;
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom-style: dashed;
  border-bottom-color: #409EFF;
  border-bottom-width: 1px;
}
.good-info{
  color: #409EFF;
}
.good-info:hover{
  border-radius: 5px;
  padding-left: 5px;
  padding-right: 5px;
  cursor: pointer;
  background-color: antiquewhite;
}
.good-action{
  display: flex;
  justify-content: flex-end;
  width: 60px;
  margin-left: 40px;
}
.buton-icon{
  width: 23px;
  height: 23px;
  font-size: 20px;
  color: black;
}
.buton-icon:hover{
  width: 23px;
  height: 23px;
  font-size: 22px;
  color: #409EFF;
  /*padding-left: 5px;*/
}
.buton-icon-add{
  overflow: hidden;
}
.buton-icon-add:hover{
  overflow: visible;
}
.good-action>*{
  font-size: larger;
  padding-right: 10px;
}
.good-action>*:hover{
  cursor: pointer;
}
.add-award{
  min-width: 500px;
  height: 30px;
  /*position: absolute;*/
  float: right;
  left: 350px;
}
.add-award-text{
  padding-top: 5px;
  padding-bottom: 5px;
  float: right;
  font-size: 15px;
}
.add-award-text:hover{
  background-color: white;
  border-radius: 5px;
}

.group-container {
  display: flex;
  flex-direction: column;
}

</style>